<template>
  <div class="box" @click="toDetail">
    <div class="bli" v-if="isTrade != 3">
      <div class="t1">{{ detail.symbolName }} {{ $t("common.yongxu") }}</div>
      <div class="b1">{{ detail.createTime }}</div>
    </div>

    <div v-if="isTrade == 1 && !detail.sideType">
      <div class="bli" style="margin: 4vw 0 5vw">
        <div class="b1" :class="detail.side == '多' ? 'green' : 'red'">
          {{ handleType(detail.type) }}/{{
            detail.operationType == "开" ? $t("common.kai") : $t("common.ping")
          }}{{ detail.side == "多" ? $t("long.duo") : $t("long.kong") }}
        </div>
        <div
          class="b1"
          :class="
            detail.status == '完全成交' || detail.status == '部分成交'
              ? 'green'
              : 'huihui'
          "
        >
          {{ handleStatus(detail.status) }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">
          {{ $t("long.chengjiaoshuliang") }}({{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }})
        </div>
        <div class="b2">
          {{
            curyType != "zhang"
              ? (curyType == "main"
                  ? detail.currencyDealNum
                  : detail.dealNum) || "--"
              : $formatMoney(parseInt(detail.dealNum * detail.sheet),11) || "--"
          }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">
          {{ $t("long.weituoshuliang") }}({{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }})
        </div>
        <div class="b2">
          {{
            curyType != "zhang"
              ? (curyType == "main" ? detail.currencyNum : detail.num) || "--"
              : $formatMoney(parseInt(detail.num * detail.sheet),11) || "--"
          }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("long.weituojiage") }}(USDT)</div>
        <div class="b2">{{ detail.price || "--" }}</div>
      </div>
      <div class="bli" style="margin: 0">
        <div class="b1">{{ $t("long.chengjiaojunjia") }}(USDT)</div>
        <div class="b2">{{ detail.dealAvg || "--" }}</div>
      </div>
    </div>
    <div class="zhisun" v-if="isTrade == 1 && detail.sideType">
      <div
        class="bli"
        style="margin: 4vw 0 5vw; justify-content: space-between"
      >
        <div class="b1" :class="detail.side == '平多' ? 'green' : 'red'">
          {{ handleStopType(detail.type) }}/{{
            handleSideType(detail.sideType)
          }}
        </div>
        <div class="t2" :class="detail.status == '已生效' ? 'green' : 'huihui'">
          {{ handleStatus(detail.status) }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("long.weituozongliang") }}</div>
        <div class="b2">
          {{
            curyType != "zhang"
              ? (curyType == "main" ? detail.currencyNum : detail.num) || "--"
              : $formatMoney(parseInt(detail.num * detail.sheet),11) || "--"
          }}{{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }}
        </div>
      </div>
      <div class="bli" v-if="detail.hasStopProfit == '是'">
        <div class="b1">{{ $t("long.zhiyingchufajia") }}</div>
        <div class="b2">
          ≥ {{ detail.stopProfitTrigger }} ({{ $t("common.biaojijiage") }})
        </div>
      </div>
      <div class="bli" v-if="detail.hasStopProfit == '是'">
        <div class="b1">{{ $t("long.zhiyingweituojia") }}</div>
        <div class="b2">
          {{
            detail.stopProfitType == "市价"
              ? $t("common.shijia")
              : detail.stopProfitPrice
          }}
        </div>
      </div>
      <div class="bli" v-if="detail.hasStopLost == '是'">
        <div class="b1">{{ $t("long.zhisungchufajia") }}</div>
        <div class="b2">
          ≤ {{ detail.stopLostTrigger }} ({{ $t("common.biaojijiage") }})
        </div>
      </div>
      <div class="bli" v-if="detail.hasStopLost == '是'">
        <div class="b1">{{ $t("long.zhisungweituojia") }}</div>
        <div class="b2">
          {{
            detail.stopLostType == "市价"
              ? $t("common.shijia")
              : detail.stopLostPrice
          }}
        </div>
      </div>
    </div>
    <div v-if="isTrade == 2">
      <div class="bli" style="margin: 4vw 0 5vw">
        <div class="b1" :class="detail.sideCn == '多' ? 'green' : 'red'">
          {{ handleType(detail.orderTypeCn) }}/{{
            detail.operationType == "开" ? $t("common.kai") : $t("common.ping")
          }}{{ detail.sideCn == "多" ? $t("long.duo") : $t("long.kong") }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("common.jiage") }}</div>
        <div class="b2">
          {{ detail.price || "--" }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">
          {{ $t("long.chengjiaoshuliang") }}({{
            curyType != "zhang"
              ? curyType == "token"
                ? detail.tokenCurName
                : detail.mainCurName
              : $t('common.zhang')
          }})
        </div>
        <div class="b2">
          {{
            curyType != "zhang"
              ? (curyType == "main" ? detail.currencyNum : detail.num) || "--"
              : $formatMoney(parseInt(detail.num * detail.sheet),11) || "--"
          }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("long.shouxufei") }}(USDT)</div>
        <div class="b2">{{ detail.handlingFee || "--" }}</div>
      </div>
      <div class="bli" style="margin: 0">
        <div class="b1">{{ $t("long.yishixianyingkui") }}(USDT)</div>
        <div class="b2">{{ detail.profit || "--" }}</div>
      </div>
    </div>
    <div v-if="isTrade == 3">
      <div class="bli">
        <div class="t1">{{ detail.curName }}</div>
        <div class="b1">{{ detail.createTime }}</div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("common.leixing") }}</div>
        <div class="b2">
          {{ detail.businessType || "--" }}
        </div>
      </div>
      <div class="bli">
        <div class="b1">{{ $t("common.heyue") }}</div>
        <div class="b2">{{ detail.symbolName }}{{ $t("common.yongxu") }}</div>
      </div>
      <div class="bli" style="margin: 0">
        <div class="b1">{{ $t("common.zonge") }}</div>
        <div class="b2">
          {{ detail.amount || "--" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["detail", "isTrade", "curyType"],
  data() {
    return {};
  },
  methods: {
    handleSideType(side) {
      switch (side) {
        case "平多":
          return this.$t("long.pingduo");
        case "平空":
          return this.$t("long.pingkong");
        case "开多":
          return this.$t("common.kaiduo");
        case "开空":
          return this.$t("common.kaikong");
      }
    },
    handleType(status) {
      switch (status) {
        case "市价单":
          return this.$t("long.shijiadan");
        case "限价单":
          return this.$t("long.xianjiadan");
        case "强平单":
          return this.$t("long.qiangpingdan");
      }
    },
    handleStopType(status) {
      // 限价止损  市价止损   限价止盈  市价止盈  限价止损限价止盈  限价止损市价止盈  市价止损  限价止盈  市价止损市价止盈
      switch (status) {
        case "限价止损":
          return this.$t("common.xianjia") + this.$t("common.zhisun");
        case "市价止损":
          return this.$t("common.shijia") + this.$t("common.zhisun");
        case "限价止盈":
          return this.$t("common.xianjia") + this.$t("common.zhiying");
        case "市价止盈":
          return this.$t("common.shijia") + this.$t("common.zhiying");
        case "限价止损限价止盈":
          return (
            this.$t("common.xianjia") +
            this.$t("common.zhisun") +
            this.$t("common.xianjia") +
            this.$t("common.zhiying")
          );
        case "限价止损市价止盈":
          return (
            this.$t("common.shijia") +
            this.$t("common.zhisun") +
            this.$t("common.shijia") +
            this.$t("common.zhiying")
          );
        case "市价止损市价止盈":
          return (
            this.$t("common.shijia") +
            this.$t("common.zhisun") +
            this.$t("common.shijia") +
            this.$t("common.zhiying")
          );
      }
    },
    handleStatus(status) {
      switch (
        status //3完全成交、4已撤销、5已过期 2部分成交  （0待生效、1处理中、2已生效、3已撤销、4已过期）
      ) {
        case "完全成交":
          return this.$t("long.wanquanchengjiao");
        case "已撤销":
          return this.$t("long.yichexiao");
        case "部分成交":
          return this.$t("long.bufenchengjiao");
        case "已过期":
          return this.$t("long.yiguoqi");
        case "待生效":
          return this.$t("long.daishengxiao");
        case "处理中":
          return this.$t("long.chulizhong");
        case "已生效":
          return this.$t("long.yishengxiao");
      }
    },
    toDetail() {
      if (this.isTrade == 1) {
        this.$router.push({
          path: "/wtdetails",
          query: {
            zid: this.detail.id,
            tokenOrMain: this.curyType,
            type: this.detail.sideType ? "stoporder" : "order",
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 4vw;
  border-bottom: 1px solid #171A2B;
  .bli {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.8vw;
    .b1 {
      color: #8992AE;
      font-size: 3.2vw;
    }
    .b2 {
      color: #fff;
      font-size: 3.2vw;
      font-weight: 600;
    }
    .t1 {
      color: #fff;
      font-size: 4vw;
      font-weight: 600;
    }
  }
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
.zhisun {
  .bli {
    justify-content: flex-start;
    .b1 {
      margin-right: 2.4vw;
    }
  }
}
.huihui {
  color: #8992AE !important;
}
</style>